<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/mui.css" />
		<link rel="stylesheet" href="css/cropper.min.css" />
		<!--App自定义的css-->
		<style type="text/css">
			.content {
				margin-top: 10px;
				display: flex;
				justify-content: center;
				width: 100%;
				align-items: center;
				flex-direction: column;
			}
			
			.content>button {
				margin: 10px auto;
			}
		</style>
	</head>

	<body>
		<div id="content" class="content">
			<button id="selectImg" class="mui-btn-blue">选择图片</button>
			<div id="changeAvatar">
				<img width="100px" src="img/img_register.png">
			</div>
		</div>
		<div id="imgContent" style="display: flex;justify-content: center;align-items: center;flex-direction: column;background: #fff;padding-bottom: 20px;">
			<div style="display: flex;justify-content: space-between;width: 100%;padding: 10px 15px;">
				<span class="mui-icon mui-icon-close"></span>
				<span id="btnConfirm" class="mui-icon mui-icon-checkmarkempty"></span>
			</div>
			<img style="width: 200px" src="img/im.jpg" id="originalImg">
		</div>
	</body>
	<script src="js/mui.min.js"></script>
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/cropper.js"></script>
	<script>
		mui.plusReady(function() {
			$("#imgContent").hide();
			/*点击头像触发*/
			document.getElementById('selectImg').addEventListener('tap', function() {
				if(mui.os.plus) {
					var a = [{
						title: "拍照"
					}, {
						title: "从手机相册选择"
					}];
					plus.nativeUI.actionSheet({
						title: "修改用户头像",
						cancel: "取消",
						buttons: a
					}, function(b) { /*actionSheet 按钮点击事件*/
						switch(b.index) {
							case 0:
								break;
							case 1:
								getImage(); /*拍照*/
								break;
							case 2:
								galleryImgs(); /*打开相册*/
								break;
							default:
								break;
						}
					})
				}
			}, false);
			//拍照
			function getImage() {
				var cmr = plus.camera.getCamera();
				cmr.captureImage(function(p) {
					plus.io.resolveLocalFileSystemURL(p, function(entry) {
						var localurl = entry.toLocalURL(); //
						$("#report").html('<img style="width: 100%;height: 100%;" src="' + localurl + '">');
						cutImg();
						mui('#picture').popover('toggle');
					});
				});
			}
			//相册选取
			function galleryImgs() {
				plus.gallery.pick(function(e) {
					$("#content").fadeOut();
					$("#originalImg").attr("src", e.files[0]);
					$("#imgContent").show();
					cutImg();
					mui('#picture').popover('toggle');
				}, function(e) {
					//outSet( "取消选择图片" );
				}, {
					filter: "image",
					multiple: true
				});
			}

			function cutImg() {
				$("#content").fadeIn();
				var $image = $('#imgContent > img');
				$image.cropper({
					aspectRatio: 1 / 1,
					autoCropArea: 0.8
				});
			}
			document.getElementById("btnConfirm").addEventListener("click", function() {
				var $image = $('#imgContent > img');
				
				function convertCanvasToImage(canvas) {
					var image = new Image();
					image.src = canvas.toDataURL("image/jpg");
					return image;
				}
				var dataURL = convertCanvasToImage($image.cropper("getCroppedCanvas")).src;
                
				$("#changeAvatar >img").attr('src', dataURL);
				$("#imgContent").hide();
				$("#content").show();
				$("#content").fadeIn();
			})
		})
	</script>

</html>